<template>
    <div class="organization-main">
        <organization-list class="organization-list"/>
        <div class="organization-main-right">
            <TitleBars v-if="isCustomTitle"></TitleBars>
            <span class="company">
                xx科技 
            </span>
            <div class="organization-main-right-content">
                <el-scrollbar class="organization-tree">
                    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <span>
                                    <el-icon v-if="data.children"><Menu/></el-icon>
                                    <el-icon v-else><UserFilled/></el-icon>
                                </span>
                                <span>
                                    {{ node.label }}
                                </span>
                            </span>
                        </template>
                    </el-tree>
                </el-scrollbar>

                <div class="preview">
                    <h5>
                        {{ selectItem ? selectItem.label : '' }}
                    </h5>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import {
    reactive,
    toRefs,
    computed
} from "vue";
import OrganizationList from './organizationlist.vue';
import TitleBars from '@/components/TitleBars.vue';
import {useRouter} from 'vue-router';

// 常见的中文姓氏列表  
const surnames = ['张', '李', '王', '刘', '陈', '杨', '赵', '黄', '周', '吴'];  
// 常见的中文名字列表  
const names = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '勇', '杰', '娟'];  
  
// 生成随机中文姓名的函数  
function generateRandomName() {  
  const randomSurname = surnames[Math.floor(Math.random() * surnames.length)];  
  const randomName = names[Math.floor(Math.random() * names.length)];  
  return randomSurname + randomName;  
}  

export default {
    name: "OrganizationView",
    components: {
        OrganizationList,
        TitleBars
    },

    setup() {
        const state = reactive({
            data: [
                    {
                        label: '总经理办公室',
                        children: [
                        {
                            label: '监事会',
                            children: [
                            {
                                label: generateRandomName(),
                            },
                            ],
                        },
                        ],
                    },
                    {
                        label: '供应链',
                        children: [
                            {
                                label: '理事会',
                                children: [
                                {
                                    label: generateRandomName(),
                                },
                                ],
                            },
                            {
                                label: '运营部',
                                children: [
                                {
                                    label: generateRandomName(),
                                },
                                {
                                label: '生产部',
                                children: [
                                {
                                    label: generateRandomName(),
                                },
                                ],
                            },
                            {
                                label: '销售中心',
                                children: [
                                {
                                    label: generateRandomName(),
                                },
                                ],
                            },
                            {
                                label: '生产部',
                                children: [
                                {
                                    label: generateRandomName(),
                                },
                                ],
                            },
                            {
                                label: '销售中心',
                                children: [
                                {
                                    label: generateRandomName(),
                                },
                                ],
                            }
                            ],
                        },
                        ],
                    },
                    {
                        label: '运输部',
                        children: [
                        {
                            label: '生产部',
                            children: [
                            {
                                label: generateRandomName(),
                            },
                            ],
                        },
                        {
                            label: '销售中心',
                            children: [
                            {
                                label: generateRandomName(),
                            },
                            ],
                        },
                    ],
                },
            ],
            selectItem: null
        });
        const router = useRouter();

        const isCustomTitle = computed(()=> {
            return router.currentRoute.value.meta.customTitle;
        });

        const defaultProps = {
            children: 'children',
            label: 'label',
        }

        const handleNodeClick = (data) => {
            console.log(data)
            state.selectItem = data;
        }

        return {
            ...toRefs(state),
            isCustomTitle,
            handleNodeClick,
            defaultProps
        };
    },
};
</script>

<style lang="scss" scoped>
.organization-main {
    background: #f6f6f7;
    display: flex;
    height: 100%;
    width: 100%;

    .organization-list {
        width: 240px;
        border-right: 1px solid #dee0e2;
    }
    .organization-main-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;

        .company {
            text-align: left;
            margin: 10px;
            font-size: large;
            font-weight: bold;
        }

        .organization-main-right-content {
            height: 100%;
            display: flex;
            border-top: 1px solid #dee0e2;
            -webkit-app-region: no-drag;

            .organization-tree {
                min-width: 280px;
                height: calc(100vh - 70px);
                border-right: 1px solid #e5e6e7;

                .el-tree {
                    background: #f6f6f7;
                    --el-tree-node-content-height: 36px;
                    --el-tree-node-hover-bg-color: #d6e4f6;

                    .custom-tree-node {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        line-height: 32px;


                        .el-icon {
                            width: 26px;
                            height: 32px;
                            font-size: large;
                            color: #4b95f3;
                        }

                        span {
                            line-height: 32px;
                        }
                    }
                }
            }

            .preview {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;

                h5 {
                    font-size: large;
                    font-weight: bold;
                }
            }
        }
    }

}
</style>

